<template>
	<view class="address-form">
		<form>
			<view class="address_allstyle">
				<view class="address_item">
					<text class="key_name">收货人</text>
					<input v-model="userAddress.userName" type="text" placeholder="请输入收货人姓名" />
				</view>
				<view class="address_item">
					<text class="key_name">联系方式</text>
					<input v-model="userAddress.phone" type="text" placeholder="请输入收货人手机号" />
				</view>
				<view class="address_item">
					<text class="key_name">所在地区</text>
					<input v-model="userAddress.area" type="text" placeholder="请输入所在地区" />
				</view>
				<view class="address_item">
					<text class="key_name">详细地址</text>
					<input v-model="userAddress.detailsAddress" type="text" placeholder="请输入街道小区楼牌号等" />
				</view>
			</view>
			<view class="address_btn">
				<button @click="saveAddress()" class="address_saveBtn">保存</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getAddressInfo,
		postAddressInfo
	} from '@/request/api/userAddress.js'

	export default {
		name: 'userAddress',
		data() {
			return {
				userAddress: {
					userName: '',
					phone: '',
					area: '',
					detailsAddress: ''
				},

			}
		},
		methods: {
			async saveAddress() {
				const res = await postAddressInfo(this.userAddress)
				if (res.code == 0) {
					uni.showToast({
						title: '保存成功'
					})
				}
			},
			async getAddress() {
				const res = await getAddressInfo()
				if (res.data) {
					this.userAddress = res.data
				}
			}
		},
		mounted() {
			this.getAddress()
		}
	}
</script>

<style>
	.address-form {
		border-top: 8px solid #f2f2f2;
	}

	.address_allstyle {
		background: white;
		color: #222;
		padding: 0 15px;
	}

	.address_btn {
		padding: 15px;
	}

	.address_saveBtn {
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		color: #fff;
		background-image: linear-gradient(90deg, #2c7fd9, #4fa1f3);
		background-color: #007aff;
		font-size: 16px;
	}

	.address_item {
		border-bottom: 1px solid #d9d9d9;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 15px 0;
	}


	.key_name {
		white-space: nowrap;
		width: 25%;
		font-size: 16px;
	}
</style>